
import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { 
  Calendar, 
  Clock, 
  Zap, 
  CloudRain, 
  Shield, 
  AlertTriangle,
  Edit, 
  Trash2,
  CheckCircle,
  Car,
  Ship,
  Train
} from "lucide-react";
import { format, parseISO, differenceInDays } from "date-fns";

export default function GlobalEventCard({ event, onEdit, onDelete }) {
  const getEventTypeConfig = (type) => {
    const configs = {
      peakPeriod: { color: "bg-red-100 text-red-700", icon: <Zap className="w-4 h-4" />, label: "高峰期" },
      powerOutageWindow: { color: "bg-green-100 text-green-700", icon: <Shield className="w-4 h-4" />, label: "停电窗口" },
      roadClosureWindow: { color: "bg-indigo-100 text-indigo-700", icon: <Car className="w-4 h-4" />, label: "封路窗口" },
      navigationSuspensionWindow: { color: "bg-cyan-100 text-cyan-700", icon: <Ship className="w-4 h-4" />, label: "停航窗口" },
      transportSuspensionWindow: { color: "bg-gray-200 text-gray-800", icon: <Train className="w-4 h-4" />, label: "停运窗口" },
      climateEvent: { color: "bg-blue-100 text-blue-700", icon: <CloudRain className="w-4 h-4" />, label: "气候事件" },
      supplyGuarantee: { color: "bg-orange-100 text-orange-700", icon: <AlertTriangle className="w-4 h-4" />, label: "保供电" },
      holiday: { color: "bg-purple-100 text-purple-700", icon: <Calendar className="w-4 h-4" />, label: "节假日" }
    };
    return configs[type] || { color: "bg-gray-100 text-gray-700", icon: <Clock className="w-4 h-4" />, label: "其他" };
  };

  const typeConfig = getEventTypeConfig(event.type);
  const duration = differenceInDays(parseISO(event.endDate), parseISO(event.startDate)) + 1;
  const isActive = () => {
    const now = new Date();
    const start = parseISO(event.startDate);
    const end = parseISO(event.endDate);
    return now >= start && now <= end;
  };

  return (
    <Card className={`hover:shadow-lg transition-shadow duration-300 ${isActive() ? 'border-blue-500 shadow-md' : ''}`}>
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <CardTitle className="text-lg font-semibold text-gray-900 mb-2">
              {event.name}
            </CardTitle>
            <div className="flex items-center gap-2 mb-2">
              <Badge className={`${typeConfig.color} flex items-center gap-1`}>
                {typeConfig.icon}
                {typeConfig.label}
              </Badge>
              {isActive() && (
                <Badge className="bg-blue-100 text-blue-700 flex items-center gap-1">
                  <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
                  进行中
                </Badge>
              )}
              {event.isPermissiveWindow && (
                <Badge className="bg-green-100 text-green-700 flex items-center gap-1">
                  <CheckCircle className="w-3 h-3" />
                  可作业
                </Badge>
              )}
            </div>
          </div>
          <div className="flex gap-1">
            <Button
              variant="ghost"
              size="icon"
              onClick={() => onEdit(event)}
              className="h-8 w-8 text-gray-400 hover:text-gray-600"
            >
              <Edit className="w-4 h-4" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => onDelete(event.id)}
              className="h-8 w-8 text-gray-400 hover:text-red-600"
            >
              <Trash2 className="w-4 h-4" />
            </Button>
          </div>
        </div>
      </CardHeader>

      <CardContent className="pt-0">
        <div className="space-y-3">
          {/* Date Range */}
          <div className="flex items-center text-sm text-gray-600">
            <Calendar className="w-4 h-4 mr-2" />
            <span>
              {format(parseISO(event.startDate), 'yyyy-MM-dd')} 至 {format(parseISO(event.endDate), 'yyyy-MM-dd')}
            </span>
          </div>

          {/* Duration */}
          <div className="flex items-center text-sm text-gray-600">
            <Clock className="w-4 h-4 mr-2" />
            <span>{duration} 天</span>
            {event.durationMultiplier !== 1.0 && (
              <Badge variant="outline" className="ml-2">
                工期 ×{event.durationMultiplier}
              </Badge>
            )}
          </div>

          {/* Description */}
          {event.description && (
            <div className="text-sm text-gray-600 bg-gray-50 p-3 rounded-md">
              {event.description}
            </div>
          )}

          {/* Impact Summary */}
          <div className="pt-2 border-t">
            <div className="text-xs text-gray-500">
              {event.durationMultiplier > 1.0 && (
                <span className="text-orange-600">⚠ 此期间施工工期将增加 {((event.durationMultiplier - 1) * 100).toFixed(0)}%</span>
              )}
              {event.durationMultiplier < 1.0 && (
                <span className="text-green-600">✓ 此期间施工工期将缩短 {((1 - event.durationMultiplier) * 100).toFixed(0)}%</span>
              )}
              {event.durationMultiplier === 1.0 && (
                <span className="text-gray-600">— 此期间工期不受影响</span>
              )}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
